<template>
  <div class="vip">
    <van-nav-bar
      title="会员中心"
      left-arrow
      right-text="退出"
      @click-left="$router.go(-1)"
      @click-right="logout"
    />
    <div class="uinfo">
      <div class="avatar">用户头像</div>
      <div class="bbq">
        <p style="color:#fff">用户名称</p>
        <p style="color:#ccc;font-size:12px;margin-top:5px">用户名：diidii</p>
        <p class="jinxiang">京享值：0777</p>
      </div>
    </div>
    <van-grid>
      <van-grid-item icon="cash-on-deliver" text="待付款" to="/orders" />
      <van-grid-item icon="logistics" text="待收货" to="/orders" />
      <van-grid-item icon="refund-o" text="退换/售后" />
      <van-grid-item class="orders" icon="orders-o" text="全部订单" to="/orders" />
    </van-grid>
    <div class="card">
      <div class="shoucang">
        <p>5</p>
        <p>我的收藏</p>
      </div>
      <div class="zuji">
        <p>1</p>
        <p>我的足迹</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    async logout() {
      const { data: res } = await this.$http.get("/mock/logout");
      this.$toast.success("退出成功");
      this.$router.replace("/login");
    }
  }
};
</script>

<style lang="less" scoped>
.van-nav-bar__left {
  bottom: 15px;
}

.uinfo {
  display: flex;
  align-items: center;
  width: 100%;
  height: 110px;
  background: linear-gradient(90deg, #eb3c3c, #ff7459);
  background-image: linear-gradient(90deg, rgb(235, 60, 60), rgb(255, 116, 89));
  border-bottom-right-radius: 15%;
  border-bottom-left-radius: 15%;
  .avatar {
    width: 80px;
    height: 80px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
    margin-left: 10px;
  }
  .bbq {
    width: 100%;
    height: 70px;
  }
}
.van-grid {
  margin-top: 10px;
  .van-grid-item {
    color: #cf8907 !important;
  }
  .orders {
    color: #eb3c3c !important;
  }
}
.card {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  background-color: #fff;
  padding-top: 10px;
}
.shoucang,
.zuji {
  flex: 1;
  width: 50%;
  text-align: center;
  p {
    margin: 0 0 10px 0;
  }
}
.van-icon-arrow-left:before,
.van-icon-ellipsis:before {
  font-size: 20px;
  color: #000;
}
.van-nav-bar__title {
  font-size: 18px;
}
.vip {
  height: 100%;
  background-color: #eee;
}
p {
  margin: 0;
  padding: 0;
  margin-left: 10px;
}
.jinxiang {
  width: 100px;
  color: #fff;
  font-size: 12px;
  margin-top: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding-left: 5px;
}
</style>
